<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>禅林瑜伽管理端</title>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="../../plugins/element-ui/index.css" />
  <link rel="stylesheet" href="../../styles/common.css" />
  <link rel="stylesheet" href="../../styles/page.css" />
</head>
<body>
  <div class="addBrand-container" id="member-add-app">
    <div class="container">
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        :rules="rules"
        :inline="false"
        label-width="180px"
        class="demo-ruleForm"
      >
        <el-form-item
          label="会员姓名:"
          prop="name"
        >
          <el-input
            v-model="ruleForm.name"
            placeholder="请输入会员姓名"
            maxlength="20"
          />
        </el-form-item>

        <el-form-item
          label="手机号:"
          prop="phone"
        >
          <el-input
            v-model="ruleForm.phone"
            placeholder="请输入手机号"
            maxlength="20"
          />
        </el-form-item>
        <el-form-item
          label="性别:"
          prop="sex"
        >
          <el-radio-group v-model="ruleForm.sex">
            <el-radio label="女"></el-radio>
            <el-radio label="男"></el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item
          label="次卡选择:"
          prop="conutCard"
        >
          <el-input
            v-model="ruleForm.countCard"
            placeholder="请输入次数"
            maxlength="20"
          />
        </el-form-item>
          <span>*如果次卡为0,必须输入会员开卡日期和结束日期。否则默认输入当前日期</span>
        <el-form-item
          label="开始日期:"
          prop="startTime"
        >
            <el-date-picker
                    v-model="ruleForm.startTime"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="开始日期">
            </el-date-picker>
        </el-form-item>

        <el-form-item
          label="快捷提示:"
          prop="stopTime"
        >
            <el-button @click="katips('week')" type="success" round>一周卡+1</el-button>
            <el-button @click="katips('month')" type="success" round>一月卡+1</el-button>
            <el-button @click="katips('quarter')" type="success" round>一季卡+1</el-button>
            <el-button @click="katips('year')" type="success" round>一年卡+1</el-button>
        </el-form-item>

        <el-form-item
              label="结束日期:"
              prop="stopTime"
        >
          <el-date-picker
                  v-model="ruleForm.stopTime"
                  value-format="yyyy-MM-dd"
                  type="date"
                  placeholder="结束日期">
          </el-date-picker>
        </el-form-item>

      <el-form-item
              label="备注:"
              prop="text"
      >
          <el-input
                  v-model="ruleForm.text"
                  placeholder="请输入备注..."
                  type="textarea"
          />
      </el-form-item>

        <div class="subBox address">
          <el-form-item>
            <el-button  @click="goBack()">
              取消
            </el-button>
            <el-button
              type="primary"
              @click="submitForm('ruleForm', false)"
            >
              保存
            </el-button>
            <el-button
              v-if="actionType == 'add'"
              type="primary"
              class="continue"
              @click="submitForm('ruleForm', true)"
            >
              保存并继续添加
            </el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>
  </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="../../plugins/vue/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="../../plugins/element-ui/index.js"></script>
    <!-- 引入axios -->
    <script src="../../plugins/axios/axios.min.js"></script>
    <script src="../../js/request.js"></script>
    <script src="../../api/member.js"></script>
    <script src="../../js/validate.js"></script>
    <script src="../../js/index.js"></script>
    <script>
      new Vue({
        el: '#member-add-app',
        data() {
          return {
            id: '',
            actionType : '',
            ruleForm : {
                'name': '',
                'phone': '',
                'sex': '女',
                'text': '',
                'startTime': '',
                'stopTime': '',
                'countCard':0
            }
          }
        },
        computed: {
          rules () {
            return {
              //账号
              username: [
                {
                  required: true, 'validator': checkUserName, trigger: 'blur'
                }
              ],
              //姓名
              name: [{ required: true, 'validator': checkName, 'trigger': 'blur' }],
              'phone': [{ 'required': true, 'validator': checkPhone, 'trigger': 'blur' }],
              'idNumber': [{ 'required': true, 'validator': validID, 'trigger': 'blur' }]
            }
          }
        },
        created() {
          /*获取参数id*/
          this.id = requestUrlParam('id');
          /*判断参数是id还是add  -》如果是id调用edit   否则调用add*/
          this.actionType = this.id ? 'edit' : 'add';
          if (this.id) {
            this.init()
          }
        },
        mounted() {
        },
        methods: {
          async init () {
            queryEmployeeById(this.id).then(res => {
              console.log(res);
              if (String(res.code) === '1') {
                console.log(res.data);
                this.ruleForm = res.data;
                this.ruleForm.sex = res.data.sex === '0' ? '女' : '男'
                // this.ruleForm.password = ''
              } else {
                this.$message.error(res.msg || '操作失败')
              }
            })
          },
          handleChange(value) {
            console.log(value);
          },
          submitForm (formName, st) {
            this.$refs[formName].validate((valid) => {
              if (valid) {
                if (this.actionType === 'add') {
                  const params = {
                    ...this.ruleForm,
                    sex: this.ruleForm.sex === '女' ? '0' : '1'
                  };
                  /*找到发送请求的方法*/
                  addEmployee(params).then(res => {
                    if (res.code === 1) {
                      this.$message.success('会员添加成功！');
                      if (!st) {
                        this.goBack()
                      } else {
                        this.ruleForm = {
                          username: '',
                          'name': '',
                          'phone': '',
                          // 'password': '',
                          // 'rePassword': '',/
                          'sex': '男',
                          'idNumber': ''
                        }
                      }
                    } else {
                      this.$message.error(res.msg || '操作失败')
                    }
                  }).catch(err => {
                    this.$message.error('请求出错了：' + err)
                  })
                } else {
                  const params = {
                    ...this.ruleForm,
                    sex: this.ruleForm.sex === '女' ? '0' : '1'
                  };
                  editEmployee(params).then(res => {
                    if (res.code === 1) {
                      this.$message.success('会员信息修改成功！');
                      this.goBack()
                    } else {
                      this.$message.error(res.msg || '操作失败')
                    }
                  }).catch(err => {
                    this.$message.error('请求出错了：' + err)
                  })
                }
              } else {
                console.log('error submit!!');
                return false
              }
            })
          },
          goBack(){
            window.parent.menuHandle({
              id: '2',
              url: '/backend/page/member/list.html',
              name: '会员管理'
            },false)
          },
          // 月卡次卡快选
          katips(ka){
            //获取开始时间
            let startTime = this.ruleForm.startTime;
            console.log("开始时间startTime="+startTime);

            // 开始时间判断，如果开始时间为空，提示用户先输入开始时间
            if(startTime == null || startTime == ''){
              alert("请先输入开始时间...");
              return;
            }
            // 设置临时时间date 并把yyyy-MM-dd格式字符串日期转化为日期date格式
            let date=new Date(startTime);

            // 获取到期时间，如果到期时间不为空，则把stopTime赋值给临时日期date
            let stopTime = this.ruleForm.stopTime;
            if(stopTime !=''){
              date=new Date(stopTime);
              // alert(date);
            }
            // 开始增加相关日期
            if(ka =='week'){
              console.log("周卡+1");
              date.setDate(date.getDate()+7);

              let stop = date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate();
              this.ruleForm.stopTime = stop;

              this.$message.success('周卡+1,结束到期日期变为：'+stop);
            }else if(ka =='month'){
              console.log("月卡+1");
              date.setMonth(date.getMonth()+1);

              let stop = date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate();
              this.ruleForm.stopTime = stop;

              this.$message.success('月卡+1,结束到期日期变为：'+stop);
            }else if(ka =='quarter'){
              console.log("季度卡+1");
              date.setMonth(date.getMonth()+3);

              let stop = date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate();
              this.ruleForm.stopTime = stop;

              this.$message.success('季度卡+1,结束到期日期变为：'+stop);
            }else if(ka =='year'){
              console.log("年卡+1");
              date.setFullYear(date.getFullYear()+1);
              
              let stop = date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate();
              this.ruleForm.stopTime = stop;

              this.$message.success('年卡+1,结束到期日期变为：'+stop);
            }
            
          }
        }
      })
    </script>
</body>
</html>